<template>
	<view class="navbar">
		<view class="box_13" id="topBannerNav" :style="topBannerNavBg">
			<!-- 左侧返回按钮 -->
			<image class="button" src="/static/images/common/back.png" mode="widthFix" @tap="back" v-if="buttonStatus"></image>
			<view class="occupy" v-else></view>
			<text class="text_2">{{ title }}</text>
			<!-- 右侧删除按钮 -->
			<view class="occupy" v-if="!deleteStatus"></view>
			<text class="delete-button" @tap="remove" v-else>删除</text>
		</view>
		<!-- <view class="blank-occupy"></view> -->
	</view>
</template>

<script>
	export default {
		name: "navBar",
		props: {
			//标题
			title: {
				type: String,
				default: function() {
					return '';
				}
			},
			// 按钮显示状态
			buttonStatus: {
				type: Boolean,
				default: function() {
					return true;
				}
			},
			// 删除按钮显示状态
			deleteStatus: {
				type: Boolean,
				default: function() {
					return false;
				}
			},
			// 导航栏颜色
			backgroundColor: {
				type: String,
				default: function() {
					return 'transparent';
				}
			}
		},
		data() {
			return {
				/* 滚动导航栏 */
				topBannerNavBg: {
					backgroundColor: '',
					color: '#000000',
					backgroundImage: require('@/static/images/home/poster_index.png'),
				},
			};
		},
		mounted() {
			// window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
		},
		methods: {
			
			/* 返回上一页 */
			back() {
				uni.navigateBack()
			},
			
			/* 删除 */
			remove() {
				const that = this;
				that.$emit('delete');
			},
			
			/* 导航栏滚动 */
			// 滚动页面时触发导航变色
			handleScroll() {
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				// 设置背景颜色的透明度
				if (scrollTop) {
					this.topBannerNavBg.backgroundColor = this.backgroundColor; // scrollTop + 多少根据自己的需求设置
					// this.topBannerNavBg.color = '#FFFFFF';
				} else if (scrollTop === 0) {
					this.topBannerNavBg.backgroundColor = 'transparent' // 设置回到顶部时，背景颜色为透明
					// this.topBannerNavBg.color = '#000000';
				}
			},
			// 滚动之前重置
			beforeDestroy() {
				window.removeEventListener('scroll', this.handleScroll)
			},
		}
	}
</script>

<style lang="scss">
	.navbar {

		.box_13 {
			width: 100%;
			height: 100rpx;
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// position: fixed;
			// z-index: 970;
			box-sizing: border-box;

			.text_2 {
				width: 60%;
				overflow-wrap: break-word;
				// color: #000000;
				font-size: 38rpx;
				font-weight: bold;
				text-align: center;
				white-space: nowrap;
			}
			
			.button {
				width: 50rpx;
				height: 50rpx;
			}

			.occupy {
				width: 50rpx;
				height: auto;
			}
			
			.delete-button {
				height: auto;
				color: #F71D1F;
				font-size: 28rpx;
			}
		}

		.blank-occupy {
			height: 100rpx;
		}
	}
</style>
